<template>
  <el-row :gutter="20">
  <el-col :span="24">
    <el-col :span="16" class="button-same">
      <!-- <el-button size="medium" @click="onSyn">同步</el-button> -->
    </el-col>
    <el-col :span="8" :offset="16">
      <el-form :model="formOrg">
        <el-form-item label="组织名称:" label-width="100px" size="medium">
          <el-input v-model="formOrg.orgName" size="medium" @blur="onInputBlur" suffix-icon="el-icon-search" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </el-col>
  </el-col>
  <el-col class="table-box">
    <el-table 
            stripe
            style="width: 100%"
            :header-cell-style="{ background: '#f5f5f5' }"
            :data="tableData">
          <el-table-column type="index"
                           label="序号"
                           align="center"
                           width="100"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="组织主编码"
                           prop="code"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="org_name"
                           label="组织名称"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="org_fzr"
                           label="组织负责人"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="phone"
                           label="电话"
                           align="center"
                           show-overflow-tooltip>
          </el-table-column>                
          <el-table-column prop="open_status"
                           label="启用状态"
                           align="center"
                           show-overflow-tooltip>
                           <template slot-scope="scope">
                             <span v-if="scope.row.open_status==1">未启用</span>
                             <span v-else-if="scope.row.open_status==2">已启用</span>                             
                             <span v-else>已停用</span>
                           </template>
          </el-table-column>    
          <el-table-column prop="organ_name"
                           v-if="type==4"
                           label="绑定单位"
                           align="center"
                           show-overflow-tooltip>
                           <!-- <template slot-scope="scope">
                             <span v-if="scope.row.org_no==''">未绑定</span>
                             <span v-else>已绑定</span>
                           </template> -->
          </el-table-column>       
          <el-table-column label="操作"
                           width="100px"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="onLook(scope.row)">查看</el-button>
            <el-button type="text" @click="onRela(scope.row)" v-if="type==4">绑定</el-button>
            </template>
          </el-table-column>
        </el-table>
  </el-col>
   <el-col :span="24"
                style="margin-top:20px!important;">
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 50, 100,200]"
      :page-size="page_size"
      align="center"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
        </el-col>
        <!-- 查看 -->
        <el-dialog
  title="查看组织"
  :visible.sync="dialogVisibleOrg"
  width="45%"
  :before-close="handleClose">
<LookOrgDialog :todos="todos"></LookOrgDialog >
</el-dialog>
 <RelaOrgChooseOrg :modal='false'
               :dialogVisible.sync="chooseOrgDialogVisible"
               :orgType="chooseOrgType"
               :title="title"
               :no="no"
               :organ_name="organ_name"
               :catchBack="catchBack"
               @callback="chooseOrgCb"></RelaOrgChooseOrg>
  </el-row>
</template>

<script>
import LookOrgDialog from './lookOrgDialog'
import {DesignManageApi} from '@/services/WorkCenter'
import RelaOrgChooseOrg from '../../../../components/ChooseOrg/RelaOrgChooseOrg';
export default {
  components:{
    LookOrgDialog,
    RelaOrgChooseOrg
  },
  props:{
type:Number
  },
data(){
  return{
    jt_org_id:'',
    orgObj:{},
    no:'',//公司组织编码
    organ_name:'',//公司组织编码名称
    chooseOrgDialogVisible:false,
    chooseOrgType: 'company',//company
      title: '选择单位',
    todos:0,
    dialogVisibleOrg:false,
    formOrg:{
      orgName:''
    },
    tableData:[],
    total:0,
    page:1,
    page_size:10
  }
},
methods:{
  onRelaSave(){//关联单位
 DesignManageApi.onRela({
   data:{
     jt_org_id:this.jt_org_id,
     org_no:this.orgObj.no,
     organ_name:this.orgObj.org_name,
    //  org_type:this.orgObj.org_type
   }
 }).then((res)=>{
if(res.code==0){
  this.handleCurrentChange(1);
  this.$message.success('操作成功')
  this.no='';
  this.organ_name='';
}
 }).catch((error)=>{
   console.log(error)
 })
  },
  //子组件返回的值
    chooseOrgCb (data) {      
      this.orgObj=data;
      if(data.no!=''&&data.org_name!=''){
        this.onRelaSave()
      }else{
        this.$message.error('单位编码和单位名称不能为空')
      }
      console.log('单位数据data=', data)
    },
    catchBack(){//子组件取消时执行的事件
    this.no='';
    this.organ_name=''
    },
  //关联
  onRela(row){
    this.no='';
    this.no=row.org_no;//编码
    this.organ_name=row.organ_name;//编码名称
    this.jt_org_id=row.jt_org_id;
    this.chooseOrgDialogVisible=true;
  },
  //失去焦点
  onInputBlur(){
this.handleCurrentChange(1)
  },
  onSyn(){
    DesignManageApi.orgCommit({
      params:{

      }
    }).then((res)=>{
      if(res.code==0){
        this.$message.success('同步成功')
        this.handleCurrentChange(1);
      }
    }).catch((error)=>{
      console.log(error)
    })
  },
  //查看
  onLook(row){
    console.log('row.jt_org_id=',row.jt_org_id)
    this.todos=Number(row.jt_org_id);//组织id
  this.dialogVisibleOrg=true;
  },
  handleClose(done){
    this.todos=0;
  done();
  },
//每页显示的条数
handleSizeChange(val){
  this.page_size=val;
this.handleCurrentChange(1);
},
//当前页变化时触发的事件
handleCurrentChange(val){
this.page=val;
this.getDesignOrgData();//列表数据
},
getDesignOrgData(){//获取列表数据
  DesignManageApi.getDesignOrgData({
    params:{
      // type:this.type,
      org_name:this.formOrg.orgName,
      is_page:1,
      page:this.page,
      page_size:this.page_size
    }
  }).then((res)=>{
    this.tableData=res.data.list;
    this.total=res.data.total_count;
console.log('组织res=',res)
  }).catch((error)=>{
    console.log(error)
  })
}
},
watch:{
type(n,o){
  console.log('watch-type=',n)
}
},
created(){
  this.getDesignOrgData();//列表数据
console.log('createdtype=',this.type)
}
}
</script>

<style lang="scss" scoped>
.button-same{
  padding-left:0px!important;
}
</style>